﻿@page "/ComboBox/Default-Functionalities"

@using Syncfusion.Blazor.DropDowns
@using Newtonsoft.Json
@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample demonstrates the default functionalities of the ComboBox in Blazor application. Type a character in the ComboBox element or click the dropdown icon to choose an item from the <code>options</code> list. </p>
</SampleDescription>
<ActionDescription>
   <p>The <code>ComboBox</code> component allows the user to type a value, or choose an option from the list of predefined options.</p>
   <p>More information on the ComboBox instantiation can be found in the <a href='https://blazor.syncfusion.com/documentation/combobox/getting-started/' target='_blank'> documentation section</a>.</p>
</ActionDescription>

<div class="col-lg-8 control-section sb-property-border dropdown-height">
    <div class="control_wrapper">
        <SfComboBox TValue="string" TItem="GameFields" PopupHeight="230px"  Placeholder="Select a game" @bind-Value="@DropVal" DataSource="@Games">
            <ComboBoxEvents TValue="string" TItem="GameFields" ValueChange="OnChange"></ComboBoxEvents>
            <ComboBoxFieldSettings Text="Text" Value="ID"></ComboBoxFieldSettings>
        </SfComboBox>
    </div>
</div>
<div class="col-lg-4 property-section">
    <div class="property-panel-section">
        <div class="property-panel-header">Properties</div>
        <div class="property-panel-content">
            <table id="property" title="Properties">
                <tr>
                    <td class="left-side">Value</td>
                    <td>:<span id='value' class="right-side">@DropVal</span></td>
                </tr>
                <tr>
                    <td class="left-side">Text</td>
                    <td>:<span id='text' class="right-side">@ChangeValue</span></td>
                </tr>
            </table>
        </div>
    </div>
</div>
<style>
    .control_wrapper {
        width: 250px;
        margin: 0 auto;
        padding-top: 70px;
    }

    .property-section .right-side {
        padding-left: 10px;
    }

    .property-section .left-side {
        padding: 5px;
        width: 25%
    }

    .dropdown-height {
        min-height: 365px;
    }

    #property {
        width: 100%;
        margin: 10px
    }
</style>

@code{
    public class GameFields
    {
        public string ID { get; set; }

        public string Text { get; set; }
    }

    private List<GameFields> Games = new List<GameFields>() {
        new GameFields(){ ID= "Game1", Text= "American Football" },
        new GameFields(){ ID= "Game2", Text= "Badminton" },
        new GameFields(){ ID= "Game3", Text= "Basketball" },
        new GameFields(){ ID= "Game4", Text= "Cricket" },
        new GameFields(){ ID= "Game5", Text= "Football" },
        new GameFields(){ ID= "Game6", Text= "Golf" },
        new GameFields(){ ID= "Game7", Text= "Hockey" },
        new GameFields(){ ID= "Game8", Text= "Rugby"},
        new GameFields(){ ID= "Game9", Text= "Snooker" },
        new GameFields(){ ID= "Game10", Text= "Tennis"},
     };
    public string DropVal = "Game3";
    public string ChangeValue { get; set; } = "Basketball";

    public void OnChange(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, GameFields> args)
    {
        this.ChangeValue = args.ItemData?.Text;
    }
}
